<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Register</title>
<link rel="stylesheet" type="text/css" th:href="@{/resources/style.css}">
<link>
</head>
<body>
    <div id="header" th:include="page :: header"></div>
    <div id="content">
    <h1>Register</h1>
	<form method="POST" th:action="@{/spitter/register}" th:object="${spitter}">
	    <!-- 展示错误 -->
		<div class="errors" th:if="${#fields.hasErrors('*')}">
			<ul>
				<li th:each="err : ${#fields.errors('*')}" th:text="${err}">Input is incorrect</li>
			</ul>
		</div>
		
		<!-- First Name -->
		<label th:class="${#fields.hasErrors('firstName')}? 'error'"> First Name</label>
		:
		<input type="text" th:field="*{firstName}" th:class="${#fields.hasErrors('firstName')}? 'error'" />
		<br />
		
		<!-- Last Name -->
		<label th:class="${#fields.hasErrors('lastName')}? 'error'"> Last Name</label>
		:
		<input type="text" th:field="*{lastName}" th:class="${#fields.hasErrors('lastName')}? 'error'" />
		<br />
		
		<!-- Username -->
		<label th:class="${#fields.hasErrors('username')}? 'error'"> Username</label>
		:
		<input type="text" th:field="*{username}" th:class="${#fields.hasErrors('username')}? 'error'" />
		<br />
		
		<!-- Password -->
		<label th:class="${#fields.hasErrors('password')}? 'error'"> Password</label>
		:
		<input type="password" th:field="*{password}" th:class="${#fields.hasErrors('password')}? 'error'" />
		<br />
		
		<input type="submit" value="Register" />
	</form>
    </div>
    <div id="footer" th:include="page :: copy"></div>
</body>
</html>